<template>
  <view class="maintenance-container">
    <view class="example">
      <uni-forms
        ref="form"
        :model="repairList"
        labelWidth="80px"
      >
        <!-- 其他表单项 -->
        <uni-forms-item
          label="文件上传"
          name="imgupload"
        >
          <!-- 右边箭头 -->
          <view class="right">
            <!-- 图片列表 -->
            <view
              class="feedback-image-item"
              v-for="(item, index) in maintenanceImgList"
              :key="index"
            >
              <!-- 删除图标，当maintenanceStatus为0时显示 -->
              <view
                v-if="maintenanceStatus == 0"
                class="close-icon"
                @tap="deleteFile(index, item.id, 'img')"
              >
                <uni-icons
                  type="closeempty"
                  size="18"
                  color="#fff"
                ></uni-icons>
              </view>
              <!-- 图片预览框 -->
              <view class="image-box">
                <image
                  :src="item.url"
                  mode="aspectFill"
                  @tap="previewImg(index, item.url)"
                ></image>
              </view>
            </view>

            <!-- 视频列表 -->
            <view
              class="feedback-image-item"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <!-- 删除图标，当maintenanceStatus为0时显示 -->
              <view
                v-if="maintenanceStatus == 0"
                class="close-icon"
                @tap="deleteFile(index, item.id, 'video')"
              >
                <uni-icons
                  type="closeempty"
                  size="18"
                  color="#fff"
                ></uni-icons>
              </view>
              <!-- 视频播放框 -->
              <view class="image-box">
                <video
                  :src="item.url"
                  class="video"
                ></video>
              </view>
            </view>

            <!-- 添加图片或视频按钮，当maintenanceImgList长度小于5且maintenanceStatus为0时显示 -->
            <view
              v-if="maintenanceImgList.length < 5 && maintenanceStatus == 0"
              class="feedback-image-item"
              @tap="addImage"
            >
              <view class="image-box">
                <uni-icons
                  type="plusempty"
                  size="50"
                  color="#c7c7c7"
                ></uni-icons>
              </view>
            </view>
          </view>
        </uni-forms-item>
      </uni-forms>
      <!-- 提交按钮 -->
      <button
        v-if="maintenanceStatus == 0"
        type="primary"
        @tap="submit"
      >
        提交
      </button>
    </view>
    <!-- 选择设备弹窗 -->
    <uni-popup
      ref="popup"
      background-color="#fff"
      :show="show"
    >
      <view class="popup-content">
        <!-- 弹窗内容 -->
        123
      </view>
      <view class="btn_item">
        <button
          class="cancal"
          type="warn"
          @tap="close"
          size="mini"
        >
          关闭
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  // 导入相关API和工具函数
  import { upload, devicemultipleimages } from '@/api/test.js'
  // 其他导入...

  export default {
    data() {
      return {
        // 数据...
        imageList: [],
        maintenanceImgList: [],
        videoList: [],
        maintenanceStatus: '',
        // 其他数据...
      }
    },
    methods: {
      // 触发类型弹框
      addImage() {
        // 弹框方法
        uni.showActionSheet({
          title: '选择上传类型',
          itemList: ['图片', '视频'],
          success: (res) => {
            if (res.tapIndex == 0) {
              this.chooseImages()
            } else {
              this.chooseVideo()
            }
          },
        })
      },

      //类型框中的图片上传
      // chooseImages() {
      //   const count = 5
      //   uni.chooseImage({
      //     count: count, // 最多可以选择的图片张数，默认9
      //     sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      //     sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      //     success: (res) => {
      //       const tempFilePaths = res.tempFilePaths
      //       tempFilePaths.forEach((item, index) => {
      //         if (index < count) {
      //           //处理小程序多选状况
      //           this.maintenanceImgList.push({
      //             url: item,
      //           })
      //         }
      //       })
      //     },
      //   })
      // },
      // 图片选择并且转成二进制形式
      chooseImages() {
        const count = 5
        const fileSystemManager = uni.getFileSystemManager()
        // 限制8M
        const maxSize = 8 * 1024 * 1024
        uni.chooseImage({
          count: count, // 最多可以选择的图片张数，默认9
          sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
          maxSize: maxSize,
          success: (res) => {
            const tempFilePaths = res.tempFilePaths
            tempFilePaths.forEach((item, index) => {
              if (index < count) {
                // 将图片转换成二进制格式
                fileSystemManager.readFile({
                  filePath: item,
                  encoding: 'binary', // 设置编码格式为 binary
                  success: (readFileRes) => {
                    const binaryData = readFileRes.data
                    // 将二进制数据以键值对的形式推送回数组
                    this.maintenanceImgList.push({
                      url: item,
                      files: binaryData,
                    })
                    console.log('图片已转换为二进制并添加到数组:', {
                      url: item,
                      files: binaryData,
                    })
                  },
                  fail: (error) => {
                    console.error('读取文件失败：', error)
                  },
                })
              }
            })
          },
        })
      },

      // 提交上传按钮图片
      submit() {
        if (this.maintenanceImgList.length > 0) {
          console.log('上传的文件名路径数组', this.maintenanceImgList)
          console.log('上传的文件名路径数组url', this.maintenanceImgList[0].url)
          //设备id，图片名称，路径
          let data = {
            // 文件名参数
            name: 'files',
            // 文件名数组
            filePath: this.maintenanceImgList[0].url,
            files: this.maintenanceImgList[0].files,
            // 文件类型
            fileOneType: 'ADMachine',
          }
          //保存到数据库的方法调用
          devicemultipleimages(data).then((response) => {
            if (response.code == 200) {
              this.pics = []
              this.$refs.popup.close()
              this.checkedList = []
              this.$modal.msgSuccess('上传成功')
            } else {
              this.$modal.msgError('上传失败')
            }
          })
        } else {
          this.$modal.msgError('请选择上传的图片')
        }
      },

      //类型框中的视频上传
      chooseVideo() {
        const thant = this
        uni.chooseVideo({
          maxDuration: 20,
          camera: thant.cameraList[thant.cameraIndex].value,
          sourceType: thant.sourceType[thant.sourceTypeIndex],
          success: (res) => {
            thant.videoList.push({ url: res.tempFilePath })
          },
          fail: (err) => {
            thant.$modal.msgError(err)
          },
        })
      },
      //这里触发图片上传的方法
      uploadimg(index, maintenanceCode) {
        //判断是修改还是新增
        if (this.maintenanceCode !== '') {
          this.path = this.maintenanceImgEditList[index].url
        } else {
          this.path = this.maintenanceImgList[index].url
        }
        //设备id，图片名称，路径
        let data = {
          equipmentCode: maintenanceCode,
          name: 'maintenanceImg',
          filePath: this.path,
        }
        //保存到数据库的方法调用
        uploadMaintenanceImgAdd(data).then((response) => {
          if (response.code == 200) {
            if (this.maintenanceCode !== '') {
              uni.showToast({
                title: '修改成功',
                icon: 'success',
              })
            } else {
              uni.showToast({
                title: '新增成功',
                icon: 'success',
              })
            }
          }
        })
      },
      // 上传视频
      //这里触发视频上传的方法
      uploadVideo(index, maintenanceCode) {
        //判断是修改还是新增
        if (this.maintenanceCode !== '') {
          this.path = this.videoEditList[index].url
        } else {
          this.path = this.videoList[index].url
        }
        //设备id，图片名称，路径
        let data = {
          equipmentCode: maintenanceCode,
          name: 'maintenanceVideo',
          filePath: this.path,
        }
        //保存到数据库的方法调用
        uploadMaintenanceVideoAdd(data).then((response) => {
          if (response.code == 200) {
            if (this.maintenanceCode !== '') {
              uni.showToast({
                title: '修改成功',
                icon: 'success',
              })
            } else {
              uni.showToast({
                title: '新增成功',
                icon: 'success',
              })
            }
          }
        })
      },
      // 删除文件
      deleteFile(index, id, type) {
        // 删除文件逻辑...
      },
      // 预览图片
      previewImg(index, url) {
        // 预览图片逻辑...
      },
      // 提交表单
      // submit() {
      //   // 提交表单逻辑...
      // },

      // 关闭弹窗
      close() {
        this.$refs.popup.close()
      },
    },
  }
</script>

<style lang="scss">
  /* 样式... */
</style>
